<template>
  <view class="container">
    <view class="title">如何养成良好的学习习惯？</view>
    <view class="time">发布于2023-06-01</view>
    <rich-text :nodes="content"></rich-text>
    <view class="btnbox">
      <view class="item">
        <image
          :src="`../../static/icon/${iscollect ? 'collectact' : 'collect'}.png`"
          mode="aspectFill"
          style="width: 40rpx; height: 40rpx; margin-right: 14rpx"
          @click="iscollect = !iscollect"
        ></image>
        <view>收藏</view>
      </view>
      <view class="item">
        <image src="../../static/icon/share.png" mode="aspectFill" style="width: 40rpx; height: 40rpx; margin-right: 14rpx"></image>
        <view>分享</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      iscollect: false
    };
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}
.container {
  box-sizing: border-box;
  padding: 20rpx 30rpx;
  .title {
    font-weight: bold;
    font-size: 30rpx;
    color: #222222;
  }
  .time {
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
    margin: 20rpx 0;
  }
  .btnbox {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .item {
      display: flex;
      align-items: center;
    }
  }
}
</style>
